<!--
 * @description 徽标组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-badge"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<slot>
			<text class="pure-badge__text">{{ _text }}</text>
		</slot>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { computed } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`pure-badge--theme pure-badge--theme--${_props.theme}`);

		// 幽灵
		if (_props.ghost) array.push("pure-badge--ghost");

		// 镂空
		if (_props.plain) array.push("pure-badge--plain");

		// 模式
		if (_props.mode) array.push(`pure-badge--${_props.mode}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-badge-theme: ${getThemeValue(_props.theme)}`);

		// 圆点大小
		if (_props.size) array.push(`--pure-badge-dot-size: ${_props.size}`);

		// 圆角大小
		if (_props.radius) array.push(`--pure-badge-radius: ${_props.radius}`);

		return array;
	});

	// 默认后缀
	const _defaultSuffix = computed(() => {
		if (_props.suffix) return _props.suffix;
		if (_props.mode === "overflow") return "+";
		if (_props.mode === "limit") return "k";
		return "";
	});

	// 默认最大值
	const _defaultMax = computed(() => {
		if (_props.max !== undefined) return _props.max;
		if (_props.mode === "overflow") return 99;
		if (_props.mode === "limit") return 999;
		return 0;
	});

	// 格式化后的值
	const _text = computed(() => {
		// 未设置显示模式
		if (!_props.mode) return _props.value;

		// 圆点模式
		if (_props.mode === "dot") return "";

		// 溢出模式
		if (_props.mode === "overflow") {
			const valueNumber = Number(_props.value);
			const maxNumber = _defaultMax.value;

			// 未超出
			if (valueNumber <= maxNumber) {
				return valueNumber;
			}

			// 超出了
			return maxNumber + _defaultSuffix.value;
		}

		// 切割模式
		if (_props.mode === "limit") {
			const valueNumber = Number(_props.value);
			const limitValueNumber = _defaultMax.value;
			const decimalLengthNumber = _props.decimal;

			// 未超出
			if (valueNumber <= limitValueNumber) {
				return valueNumber;
			}

			// 超出了
			const floatValue = (valueNumber / limitValueNumber).toFixed(decimalLengthNumber);
			return floatValue + _defaultSuffix.value;
		}
	});

	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
